<template>
  <div class="luckWheel">
    <div class="lucky-wheel">
      <div class="lucky-title"></div>

      <div class="wheel-main">
        <div class="wheel-pointer-box">
          <div class="wheel-pointer" @click="rotate_handle()" :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
        </div>
        <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
          <div class="prize-list">
            <div class="prize-item " v-for="(item,index) in prize_list" :key="index"
                 :style="{'background-image':index%2==0?'url('+luckWheel1+')':'url('+luckWheel2+')','transform':'rotate('+(index*rotateDeg)+'deg)','width':''+17.5/prize_list.length+'rem'}">
              <!--:style="'transform: rotate('+(index*rotateDeg)+'deg)'"-->
              <div class="prize-type">
                {{item.name}}
              </div>
              <div class="prize-count" v-if="item.name!='谢谢参与'">
                {{item.score}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chance">今日您还有 <span>{{residue}}</span> 次参与机会哦～</div>
      <div class="lucky-wheel-main">
        <p>规则说明</p>
        <p v-html="rule"></p>
      </div>
    </div>

    <div class="toast" v-show="toast_control">
      <div class="toast-container">
        <img :src="toast_pictrue" class="toast-picture">
        <div class="close" @click="close_toast()"></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
        <div class="toast-btn">
          <div class="toast-cancel"  @click="close_toast">关闭</div>
        </div>
      </div>
    </div>
    <div class="toast-mask" v-show="toast_control"></div>
    <!--<div class="warning">-->
      <!--<div class="sector">-->
      <!--</div>-->
      <!--<div class="sector"></div>-->
      <!--<div class="sector"></div>-->
    <!--</div>-->
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/7 14:44.
     */
    import utils from '../../../lib/StringExtend'
    export default {
        mounted() {
          if(utils.isNone(utils.getCookie('wechat_id_'+this.wechatId)) || utils.isNone(utils.getCookie('open_id_'+this.wechatId))) {
            this.getWechat();
          }
          if(!utils.isNone(this.code)&&!utils.isNone(this.appid)) {
            this.userInfo();
          }else {
            this.loadData();
          }
        },
        components: {

        },
        props: {},
        data() {
            return {
              residue:0,//次数
              rotateDeg:0, //角度
              rule:'',//规则
              easejoy_bean: 0, //金豆
              lottery_ticket: 0, //抽奖次数
              prize_list: [], //奖品列表
              toast_control: false, //抽奖结果弹出框控制器
              hasPrize: false, //是否中奖
              start_rotating_degree: 0, //初始旋转角度
              rotate_angle: 0, //将要旋转的角度
              start_rotating_degree_pointer: 0, //指针初始旋转角度
              rotate_angle_pointer: 0, //指针将要旋转的度数
              rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
              rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
              click_flag: true, //是否可以旋转抽奖
              index: 0,
              result_angle:[0, 45, 90, 135, 180, 225, 270, 315], //最终会旋转到下标的位置所需要的度数
              luckWheel1:require("../../../assets/images/luckWheel1.png"),
              luckWheel2:require("../../../assets/images/luckWheel2.png"),

              appid: utils.GetQueryString('appid'),
              code: utils.GetQueryString('code'),
              wechatId:utils.getCookie('wechat_id'),
              wechat_id:this.$route.query.wechat_id,//公众号
            }
        },
        computed: {
          toast_title() {
            return this.hasPrize
              ? "恭喜您，获得" + this.prize_list[this.index].score
              : "未中奖";
          },
          toast_pictrue() {
            return this.hasPrize
              ? require("../../../assets/img/congratulation.png")
              : require("../../../assets/img/sorry.png");
          }
        },
        methods: {
          //微信授权
          getWechat(){
            if(utils.isNone(this.wechat_id)){
              return;
            }
            let params = {
              redirect_url: window.location.href,
              wechat_id: this.wechat_id
            };
            utils.setCookie('wechat_id', this.$route.query.wechat_id);
            utils.setCookie('wechat_id_'+this.wechat_id, this.wechat_id);
            this.$axios.wechatWechatOauth(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              let url = res.data.url;
              window.location.href = url;
            })
          },
          //获取用户信息
          userInfo(){
            let params = {
              appid: this.appid,
              code: this.code,
            };
            this.$axios.wechatGetWechatUser(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg)
              }
              utils.setCookie('open_id_'+this.wechatId, res.data[0].open_id);
              this.loadData();
            })
          },
          loadData(){
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.luckWhellInfo(params).then((res)=>{
              this.prize_list = res.data.list;
              this.residue = res.data.residue;
              var reg = new RegExp(" ","g");
              this.rule = res.data.rule.replace(reg,'<br>');
              this.rotateDeg = 360/res.data.list.length;
              this.result_angle = [];
              res.data.list.forEach((item,index)=>{
                this.result_angle.push(this.rotateDeg*(res.data.list.length-index))
              });
            })
          },
          //此方法为处理奖品数据
          init_prize_list(list) {},
          rotate_handle() {
            if(this.residue == '0'){
              this.$toast('今日次数已用完，请明日再来哦～');
              return
            }
            if (!this.click_flag) return;
            let params = {
              open_id: utils.getCookie('open_id_'+this.wechatId)
            };
            this.$axios.luckTableClickBegin(params).then(res=>{
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
                return;
              }
              this.residue = res.data.residue;
              this.prize_list.forEach((item,index)=>{
                if(item.id == res.data.id){
                  this.index = index; //指定每次旋转到的奖品下标
                  return;
                }
              });
              this.rotating(res.data.msg);
            });
          },
          //开始转
          rotating(code) {
              var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
              var during_time = 5; // 默认为1s
              var random = Math.floor(Math.random() * 7);
              var result_index = this.index ; // 最终要旋转到哪一块，对应prize_list的下标
              var result_angle = this.result_angle;
              var rand_circle = 6; // 附加多转几圈，2-3
              this.click_flag = false; // 旋转结束前，不允许再次触发
              if (type === 0) {
                // 转动盘子
                var  rotate_angle =
                  this.start_rotating_degree +
                  rand_circle * 360 +
                  result_angle[result_index] -
                    this.start_rotating_degree % 360;
                this.start_rotating_degree = rotate_angle;
                this.rotate_angle = "rotate(" + rotate_angle + "deg)";
                // // //转动指针
                // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
                // this.start_rotating_degree_pointer =360*rand_circle;
                var that = this;
                // 旋转结束后，允许再次触发
                setTimeout(function() {
                  that.click_flag = true;
                  that.game_over(code);
                }, during_time * 1000 + 1500); // 延时，保证转盘转完
              } else {
                //
              }
          },
          game_over(code) {
            this.toast_control = true;
            this.hasPrize = code == '谢谢参与'? false:true;
          },
          //关闭弹窗
          close_toast() {
            this.toast_control = false;
          }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  .luckWheel {
    width: 100%;
    height: 100%;

  .lucky-wheel {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #ee875a;
    background-size: 100%;
    padding-top: 0.24rem;
    box-sizing: border-box;
  }
  .lucky-title {
    width: 100%;
    height: 2.3rem;
    background: url("../../../assets/img/lucky_title.png") no-repeat center top;
    background-size: 100%;
  }
  .wheel-main {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .wheel-bg {
    width: 5.5rem;
    height: 5.5rem;
    background: url("../../../assets/img/draw_wheel.png") no-repeat center top;
    background-size: 100%;
    color: #fff;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    transition: transform 3s ease;
  }
  .wheel-pointer-box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -60%);
    width: 2rem;
    height: 2rem;
  }
  .wheel-pointer {
    width: 2rem;
    height: 2rem;
    background: url("../../../assets/img/draw_btn.png") no-repeat center top;
    background-size: 100%;
    transform-origin: center 60%;
  }
  .wheel-bg div {
    text-align: center;
  }
  .prize-list {
    width: 90%;
    height: 90%;
    position: relative;
    overflow: hidden;
    margin:0 auto;
    border-radius: 50%;
  }
  .prize-list .prize-item {
    position: absolute;
    top: 0;
    left: calc(50% - 0.875rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    transform-origin:bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*width: 0px;*/
    /*height: 0px;*/
    /*border: 1.2rem solid transparent;*/
    /*border-left-width: 0px;*/
    /*border-right: 150px solid transparent;*/
    /*transform-origin: 0px 50%;*/

  }
  /*.prize-list .prize-item:first-child {*/
    /*top: 0;*/
    /*left: 8.3125rem;*/
    /*transform: rotate(20deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(2) {*/
    /*top: 2.8rem;*/
    /*left: 10.8rem;*/
    /*transform: rotate(67deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(3) {*/
    /*top: 6.4rem;*/
    /*left: 10.6rem;*/
    /*transform: rotate(-250deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(4) {*/
    /*top: 9rem;*/
    /*left: 8.2125rem;*/
    /*transform: rotate(-210deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(5) {*/
    /*top: 9.2125rem;*/
    /*left: 4.4rem;*/
    /*transform: rotate(-160deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(6) {*/
    /*top: 6.3875rem;*/
    /*left: 1.9rem;*/
    /*transform: rotate(-111deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(7) {*/
    /*top: 2.8rem;*/
    /*left: 1.8125rem;*/
    /*transform: rotate(-69deg);*/
  /*}*/
  /*.prize-list .prize-item:nth-child(8) {*/
    /*top: 0;*/
    /*left: 4.5rem;*/
    /*transform: rotate(-20deg);*/
  /*}*/
  .prize-item {
    /*width: 2.1875rem;*/
    height: 2.5rem;
    transform-origin: 0% 100%;
  }

  .prize-pic img {
    width: 4.0625rem;
    height: 2.5rem;
    margin-top: 1.5625rem;
  }
  .prize-count {
    font-size: 0.2rem;
    background: red;
    padding: 0.05rem 0.1rem;
  }
  .prize-type {
    font-size: 0.3rem;
    margin: 0.2rem 0;
  }
  .chance{
    width: 100%;
    text-align: center;
    margin: 0.8rem 0;
    color: #fff;
    font-size: 0.3rem;
    span{
      color: red;
      font-size: 0.36rem;
    }
  }
  .lucky-wheel-main {
    width:100%;
    margin: 0 auto;
    color: #fff;
    font-size: 0.28rem;
    margin-top: 0.5rem;
    padding: 0 0.6rem;
    box-sizing: border-box;
  }
  .lucky-wheel-main p{
    text-align: left;
    line-height: 0.3rem;
    font-size: 0.22rem;
  }
  .lucky-wheel-main p:first-child{
    font-size: 0.3rem;
    line-height: 0.6rem;
  }
  .main-bg {
    width: 100%;
    height: 6.5625rem;
    position: absolute;
    top: -3.4375rem;
    left: 0;
    background-size: 100%;
  }
  .bg-p {
    width: 100%;
    height: 2.95rem;
    background: rgb(252, 207, 133);
  }
  .content {
    position: absolute;
    top: 0.175rem;
    left: 0;
    background: #ee875a;
    width: 100%;
    height: 5.1875rem;
    font-size: 1.125rem;
    color: #ffeb39;
    padding-left: 6.75rem;
  }
  .content div {
    text-align: left;
  }
  .tip {
    position: relative;
    margin: 2.5rem auto 0;
    width: 17.5rem;
    border: 1px solid #fbc27f;
  }
  .tip-title {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1rem;
    color: #fccc6e;
    background: rgb(243, 109, 86);
    padding: 0.3125rem 0.625rem;
  }
  .tip-content {
    padding: 1.5625rem 0.625rem;
    font-size: 0.875rem;
    color: #fff8c5;
    line-height: 1.5;
  }
  .toast-mask {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    width: 100%;
    height: 100%;
  }
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 20000;
    transform: translate(-50%, -50%);
    width: 5rem;
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.3125rem;
    background-color: rgb(252, 244, 224);
  }
  .toast-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px dotted #fccc6e;
  }
  .toast-picture {
    position: absolute;
    top: -2.5rem;
    left: -0.2rem;
    width: 6rem;
    height: 2.74rem;
  }
  .toast-pictrue-change {
    position: absolute;
    top: -1.5rem;
    left: -1.375rem;
    width: 17.5rem;
    height: 3.125rem;
  }
  .toast-title {
    padding: 0.5rem 0;
    font-size: 18px;
    color: #fc7939;
    text-align: center;
  }
  .toast-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.16rem;
  }
  .toast-btn div {
    background-image: -moz-linear-gradient(
      -18deg,
      rgb(242, 148, 85) 0%,
      rgb(252, 124, 88) 51%,
      rgb(252, 124, 88) 99%
    );

    background-image: -ms-linear-gradient(
      -18deg,
      rgb(242, 148, 85) 0%,
      rgb(252, 124, 88) 51%,
      rgb(252, 124, 88) 99%
    );
    background-image: -webkit-linear-gradient(
      -18deg,
      rgb(242, 148, 85) 0%,
      rgb(252, 124, 88) 51%,
      rgb(252, 124, 88) 99%
    );
    box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
    width: 1.5rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    color: #fff;
  }
  .close {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    width: 0.64rem;
    height: 0.64rem;
    background: url("../../../assets/img/close_store.png") no-repeat center top;
    background-size: 100%;
  }

  :root{
    --color1:black;
    --color2:rgb(248, 228, 47);
    --radius:1.4rem;
  }
  .sector {
    width: calc(var(--radius)*2);
    height: calc(var(--radius)*2);
    position: absolute;
    clip: rect(0 2.8rem 2.8rem 1.4rem);/*上右下左*/
    overflow: hidden;
  }
  .sector::after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--color2);
    position: absolute;
    border-radius: 50%;
    clip: rect(0 1.4rem 2.8rem 0);
    background: var(--color2);
    transform: rotate(30deg);
  }
  .sector:nth-of-type(1) {
    transform: rotate(0deg);

  }
  .sector:nth-of-type(1)::after{
    background:red
  }
  .sector:nth-of-type(2) {
    transform: rotate(30deg);
  }
  .sector:nth-of-type(3) {
    transform: rotate(210deg);
  }
  .warning{
    width: calc(var(--radius)*2);
    height: calc(var(--radius)*2);

    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  }
</style>
